<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>流程列表</span>
        <router-link :to="{name:'BPMN'}">
          <el-button style="float: right; padding: 3px 0" type="text">在线绘制</el-button>
        </router-link>
      </div>
      <el-table :data="processArray" border style="width: 100%">
        <el-table-column label="序号" type="index" min-width="5%" header-align="center"></el-table-column>
        <el-table-column label="流程定义id" prop="ID_" min-width="20%" header-align="center"></el-table-column>
        <el-table-column label="流程名称" prop="NAME_" min-width="10%" header-align="center"></el-table-column>
        <el-table-column label="流程KEY" prop="KEY_" min-width="7%" header-align="center"></el-table-column>
        <el-table-column label="状态" prop="SUSPENSION_STATE_" min-width="4%" header-align="center"></el-table-column>
        <el-table-column label="部署id" prop="DEPLOYMENT_ID_" min-width="17%" header-align="center"></el-table-column>
        <el-table-column label="流程文件名" prop="RESOURCE_NAME_" min-width="20%" header-align="center"></el-table-column>
        <el-table-column label="版本" prop="VERSION_" min-width="4%" header-align="center"></el-table-column>
        <el-table-column label="操作" min-width="13%" header-align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="viewProcess(scope.row)">查看</el-button>
            <el-button type="text" @click="initiateProcess(scope.row)">发起</el-button>
            <el-button type="text">挂起</el-button>
            <el-button type="text" @click="deleteProcess(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="启动流程实例" :visible.sync="dialogFormVisible">
      <el-form v-model="initiateProcessForm" label-position="left" size="small">
        <el-form-item label="流程定义KEY">
          <el-input v-model="initiateProcessForm.instanceKey"></el-input>
        </el-form-item>
        <el-form-item label="流程实例名字">
          <el-input v-model="initiateProcessForm.instanceName"></el-input>
        </el-form-item>
        <el-form-item label="流程描述">
          <el-input v-model="initiateProcessForm.discription"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="startProcess()">确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="显示流程xml内容" :visible.sync="dialogXmlVisible" width="70%"  :close-on-click-modal="false">
      <pre>
        {{ xmlContent }}
      </pre>

      <div slot="footer" class="dialog-footer">
        <el-button @click="copyToClipboard" size="small">一键复制</el-button>
        <el-button @click="dialogXmlVisible = false" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ProcessList",
  data() {
    return {
      initiateProcessForm: {
        instanceName: '',
        instanceKey: '',
        discription: '',
      },
      processArray: [
        {
          ID: '', NAME_: '', KEY_: '', SUSPENSION_STATE_: '',
          DEPLOYMENT_ID_: '', RESOURCE_NAME_: '', VERSION_: ''
        }],
      dialogFormVisible: false,
      dialogXmlVisible: false,
      xmlContent: ''
    }
  },
  methods: {
    viewProcess(item) {
      const params = new URLSearchParams({
        deploymentID: item.DEPLOYMENT_ID_,
        resourceName: item.RESOURCE_NAME_
      });
      const url = `/process/definitionXML/?${params.toString()}`;
      this.$http.get(url, {responseType: 'text'}).then((response) => {
        this.xmlContent = response.data
        this.dialogXmlVisible = true
      }).catch((error) => {
        alert("查看失败")
      })
    },
    initiateProcess(item) {
      this.dialogFormVisible = true
      this.initiateProcessForm.instanceKey = item.KEY_
    },
    deleteProcess(item, index) {
      const id = item.DEPLOYMENT_ID_
      console.log(id)
      this.$http
          .delete("/process/definiton/" + id).then((response) => {
        if (response.data.code == 1) {
          alert("删除成功");
          this.processArray.splice(index, 1);
        } else {
          alert("删除失败");
        }
      })
    },
    startProcess() {
      this.dialogFormVisible = false
      const par = {
        instanceKey: this.initiateProcessForm.instanceKey,
        instanceName: this.initiateProcessForm.instanceName,
        instanceVariable: this.initiateProcessForm.discription
      }
      console.log(par)
      this.$http
          .post("/instance/start/", par)
          .then(response => {
            if (response.data.code == 1) {
              alert("成功");
              this.dialogFormVisible = false
            } else {
              alert("失败");
              this.dialogFormVisible = false
            }
          })
    },
    copyToClipboard() {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(this.xmlContent).then(() => {
          this.$message.success("复制成功")
          this.dialogXmlVisible = false
        }).catch(() => {
          this.$message.error("复制失败")
        })
      } else {
        // 兼容性降级
        const textarea = document.createElement('textarea')
        textarea.value = this.xmlContent
        textarea.setAttribute('readonly', '')
        textarea.style.position = 'absolute'
        textarea.style.left = '-9999px'
        document.body.appendChild(textarea)
        textarea.select()
        try {
          const successful = document.execCommand('copy')
          if (successful) {
            this.$message.success("复制成功")
            this.dialogXmlVisible = false
          } else {
            this.$message.error("复制失败")
          }
        } catch (err) {
          this.$message.error("复制失败")
        }
        document.body.removeChild(textarea)
      }
    }
  },
  mounted() {
    this.$http
        .get("/process/definitions").then((response) => {
      if (response.data.code == 1) {
        this.processArray = response.data.data;
        console.log(JSON.stringify(this.processArray, null, 2))
      } else {
        alert("无权限查看");
        location.href = "/";
      }
    })
  }
}
</script>

<style scoped>

</style>